<template>
	<view class="pro-body">

		<view class="body">
			<view class="top-container no-bottom-padding">
				<uni-list :border="false">
					<uni-list-item :border="false" title="单据编号" :rightText="header.fbillno" />
					<uni-list-item :border="false" title="库管" :rightText="header.fstockuser" />
					<!-- <uni-list-item :border="false" title="组织"  :rightText="header.orgName" /> -->
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat :date="header.fdate" format="yyyy年MM月dd日" style="font-size: 20px; color: #000000;">
							</uni-dateformat>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<template >

				<view class="">
					<view class="panel">

						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">件号：</view>
									<view class="panel_content_row_item_value">{{ detail.fspecification }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">名称：</view>
									<view class="panel_content_row_item_value">{{ detail.fmaterialname }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">编码：</view>
									<view class="panel_content_row_item_value">{{ detail.fmaterialno }}</view>
								</view>
							</view>
						</view>

						<!-- 暂时没有材质，用单位代替 -->
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">仓库：</view>
									<view class="panel_content_row_item_value">{{ detail.fstockname }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ detail.funitname }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">出库数量：</view>
							
									<view class="panel_content_row_item_value_input">
										<input style="width: 120px" v-model="detail.fqty"
										placeholder="实收数量"
										placeholder-class="input_placeholder"
										@input="handleQuality(detail)"/>
									</view>
								
								</view>
							
							</view>
						</view>
						<view class="panel_content" >
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">仓位：</view>
									<view class="panel_content_row_item_value">
										<input v-model="detail.flocationno" placeholder="请输入仓位"
										placeholder-class="input_placeholder"
										style="width: 100px;"
										/></view>
								</view>
							</view>
						</view>
						<view class="flex-list-btn" >
							 <view class="flex-list-btn-item" 
							 @click="commendLocation(detail)"> 推荐仓位</view>
							<view  class="flex-list-btn-item" 
								@click="scanOrderDe(detail)">
								扫描仓位
							</view>
							
						</view>

					</view>

				</view>

			</template>

		</view>
		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
				<button @click="auditOtherOut()" class="footerBtn save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>审核
				</button>

			</view>
		</view>
		
		<!-- 扫描托盘 -->
		<tray-popup ref="trayPopupRef" @success="trayScanningScuess"></tray-popup>
		<!-- 推荐仓位-->
		<Commend ref="commendRef" @back="back"></Commend>
	</view>
</template>

<script>
	import Commend from "@/pages/pop/commend-scan.vue"
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
	import trayPopup from '../../components/popup/trayPopup.vue'
	import {
		getOtherOutDetail,
		auditOtherOut,
		auditStkApply,
		getStkApplyDetail,
		commendLocation
	} from '@/utils/api.js'

	export default {
		components: {
			trayPopup,
			Commend
		},
		data() {
			return {
				detailId: '',
				loading: true,
				header: {},
				detail: {},
				materialList: [],
				butClick: false,
				selectRange: [],
				locationNo: '',
				locationName: '',
				currentItem : null,
				commedList : []
			}
		},
		methods: {
			//填写合格数量
			handleQuality(e){
				
				const v = e.fqty
				const zero = "(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')"
				let final = 0
				if (!v) {
				  final = 0
				} else {
				  final = v.toString().replace(zero, (v) => {
					return 0
				  })
						
				  if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0
				  }
				}
				this.$nextTick(() => {
				 e.fqty = final.toString() || '0'
				})
					
			},
			/**
			 * 推荐仓位
			 */
			commendLocation(item){
					let self = this;
					commendLocation({
						materialNo : item.fmaterialno
					}).then(res =>{
						if (res.data.status == 200){
							self.commedList = res.data.data.dataList ?? []
							
						} 
						let param = {
							dataList : self.commedList
						}

						self.$refs.commendRef.open(param)
					})
			},
			//扫码成功后返回
			trayScanningScuess(e){
				this.detail.flocationno = e;
				
			},
			//扫描仓位，扫描成功后修改下拉框中仓位信息
			scanOrderDe(item) {
				// this.currentItem = item
				this.$refs.trayPopupRef.open()
				
			},
			//审核其他出库单
			auditOtherOut() {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认审核',
					success(res) {
						if (res.confirm) {
							try {
								auditStkApply({
									fid: self.header.fid,
									dataList : self.detail
								}).then(result => {
									if (result.data.status !== 200) {
										return
									}
									uni.showToast({
										title: '审核成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success() {
												uni.$emit('update', {
													msg: '页面刷新'
												});
											}
										})
									}, 1000)
								})
							} catch (e) {
								console.log(e)
							}
						}
					}
				})
			},


			// 获取详情数据
			initData() {
				getStkApplyDetail({
					detailId: this.detailId
				}).then(res => {
					this.header = res.data.data.data
					this.detail = res.data.data.dataList

				})


			}
		},
		watch: {
			userInfo() {
				console.log(this.userInfo())
			}
		},
		onLoad(e) {
			this.detailId = e.detailId
			// 获取详情数据
			this.initData()


		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";

/* 调整列表项左右文字大小 */
	::v-deep .uni-list-item__content-title {
		font-size: 20px !important;
		/* 左侧标题字体大小 */
		padding-left: 5px;
	}

	::v-deep .uni-list-item__extra-text {
		font-size: 20px !important;
		/* 右侧内容字体大小 */
		padding-right: 5px;
		color: #333;
	}

	/* 调整行间距 */
	::v-deep .uni-list-item__container {
		padding: 3px 0 !important;
		/* 减小上下内边距 */
		min-height: 10px !important;
		/* 减小最小高度 */
	}

	.panel {
		background: #fbffe2;
		border-radius: 16rpx;
		// box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}

	/* 调整标题样式 */
	.panel_content_row_item_title {
		font-size: 17px !important;
		/* 调大字体 */
		color: #000000 !important;
		/* 纯黑字体 */
		flex-shrink: 0;
		/* 防止压缩 */
	}

	/* 调整标题样式 */
	.panel_content_row_item_value {
		flex: 1;
		font-size: 17px !important;
		/* 数值特别放大 */
		color: #333 !important;
	}

	/* 调整输入框容器 */
	.panel_content_row_item_value_input {
		height: 40px;
		flex: 1;
		/* 占据剩余空间 */
		margin-left: 10px;
		/* 增加左右间距 */
	}
</style>
